﻿/*Sắp menu trong trang, mobile, bình thường*/

.menu-contain {
    text-decoration: none;
}

    .menu-contain a {
        padding: 30px 15px;
        text-transform: capitalize;
        color: white;
        text-shadow: rgba(255, 255, 255, 0.2) 0px 0px 2px;
    }

        .menu-contain a:hover {
        }

/*#region toggle button*/
.menu-toggle-button {
    float: right;
    display: none;
    padding: 20px;
    background: none;
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

    .menu-toggle-button .icon-bar {
        display: block;
        width: 20px;
        height: 3px;
        margin-top: 3px;
        margin-bottom: 3px;
        background-color: white;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
/*#endregion*/

/*#region toggle contain ~ menu*/
.menu-toggle-contain {
}
    /*#region Main - menu*/
    .menu-toggle-contain ul.main-menu {
        display: inline-block;
    }

        .menu-toggle-contain ul.main-menu > li {
        }

            .menu-toggle-contain ul.main-menu > li > ul {
            }

            .menu-toggle-contain ul.main-menu > li:hover > ul,
            .menu-toggle-contain ul.main-menu > li:hover > a {
                background-color: #9C27B0;
            }

                .menu-toggle-contain ul.main-menu > li:hover > ul > li:hover > a {
                    background-color: #BA68C8;
                }
            /*#endregion*/

    /*#region user menu*/
    .menu-toggle-contain ul.user-menu {
        float: right;
        display: inline-block;
    }

        .menu-toggle-contain ul.user-menu > li {
        }

            .menu-toggle-contain ul.user-menu,
            .menu-toggle-contain ul.user-menu > li > a,
            .menu-toggle-contain ul.user-menu > li > ul,
            .menu-toggle-contain ul.user-menu > li:hover,
            .menu-toggle-contain ul.user-menu > li:hover a {
                text-transform: none;
                color: white;
                background-color: #FFC107;
            }

                .menu-toggle-contain ul.user-menu > li > ul > li:hover,
                .menu-toggle-contain ul.user-menu > li > ul > li:hover > a {
                    background-color: #FFD54F;
                }
/*#endregion*/

/*#endregion*/

@media (max-width: 992px) {
}

@media (max-width: 768px) {
    /*#region toggle button*/
    .menu-toggle-button {
        display: block;
    }
    /*#endregion*/

    /*#region toggle contain show/ hide*/
    .menu-contain {
    }

        .menu-contain a {
            padding: 20px 15px;
        }

        .menu-contain > .menu-toggle-contain {
            display: none; /*ẩn menu*/
            position: absolute;
            left: 0;
            top: 60px;
            min-width: 100%;
            background-color: #BA68C8;
            border: 1px solid #9E9E9E;
        }

        .menu-contain:hover > .menu-toggle-contain {
            display: block; /*hiện menu*/
        }
    /*#endregion*/

}
